<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>团课列表</title>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no" name="viewport">
	<script src="js/flexible.js"></script>
	<link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/homePage.css">
	<link rel="stylesheet" href="css/flexible.css">
	<link rel="stylesheet" href="css/vant.css">
	<link rel="stylesheet" href="css/mobiscroll.custom-3.0.0-beta6.min.css">
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/mobiscroll.custom-3.0.0-beta6.min.js"></script>
	<script src="js/vue/vue.js"></script>
	<script src="js/vue/axios.js"></script>
	<script src="js/vue/MD5.js"></script>
	<script src="js/vue/vant.js"></script>
</head>
<body>
<div id="app">
	<template>
			<div class="curriculum_head clearfix">
					<div class="clearfix timeTK">
						<div class="fl fontsize12">{{dateTimes}}</div>
						<div class="fr rl">
							<img style="height:.16rem;" src="images/rl.png">
							<input id="age">
						</div>
					 </div>
					 <div class="rq clearfix">
						 <ul class="clearfix">
							<li v-for="item in dataList" :key="item.time" @click="selectDate(item.time)" v-bind:class="{rq_check:item.check=='1'}">
								<span  class="s fontsize12">{{item.week}}</span><br>
								<span  class="x fontsize12">{{item.date}}</span>
							</li>
						 </ul>
					 </div>
					 <div class="clear"></div>
				 </div>
				<div class="container_box" style="padding-bottom: .8rem">
					<div v-if="dataMess.length>0">
						<div class="group_details group_details_state paddingtop20 clearfix" v-for="item in dataMess">
							<div class="fl" style="width:22%;">
								<img :src="item.Picurl" onerror="this.src='images/moren.png'" alt="" class="spinning_img">
							</div>
							<div class="fl" style="width:78%;">
								<div class="fl">
									<p>
										<span class="spinning_name">{{item.title}}</span>
										<!-- <span class="spinning_txx"><img src="images/woman.png"></span> -->
									</p>
									<p>
										<span class="spinning_A">{{item.Space}}</span>
										<span class="spinning_date">{{item.stime}}-{{item.etime}}</span>
									</p>
									<p class="degree">{{item.yyNum}}/{{item.max}} <span class="many_full">预约满{{item.min}}人开课</span></p>
								</div>
								<div v-if="item.yy_state=='0'" class="private_Sign private_Sign1">预约已过</div>
								<div @click="order(item.date,item.key,item.currid,item.plan_id)"
								 v-else-if="item.yy_state=='1'" class="private_Sign" 
								  @click="order(item.date,item.key,item.currid,item.plan_id)">
									代预约
								</div>
								<div v-else-if="item.yy_state=='2'" class="private_Sign">预约已满</div>
								<div v-else-if="item.yy_state=='3'">
									<div @click="pSignIn(item.uboid,item.currid)" class="private_Sign fr">签到</div>
									<div @click="pCancel(item.uboid,item.currid)" class="private_Sign private_Sign1 fr">取消预约</div>
								</div>
								<div v-else>
									<div @click="qxCancel(item.uboid)" class="private_Sign private_Sign1 fr">已签到</div>
								</div>
							</div>
						</div>
					</div>
					<div class="notDate" v-else style="margin-top: .3rem;text-align: center;">
						<img src="images/notDate.jpg"/>
					</div>
				</div>
	</template>
	<div class="footer_bar">
		<ul class="clearfix">
			<li>
				<a :href="'index.html?vid='+vid+''" class="first_a">
					<p style="color: #333346;">首页</p>
				</a>
			</li>
			<li>
				<a href="league.html" class="second_a foot_active">
					<p>代约团课</p>
				</a>
			</li>
			<li>
				<a href="privateLessons.html" class="thrid_a">
					<p>代约私教</p>
				</a>
			</li>
			<li>
				<a href="myMember.html" class="four_a">
					<p>我的会员</p>
				</a>
			</li>
		</ul>
	</div>
</div>
</body>
<script>
 var vm=new Vue({
    el: '#app',
    data: {
		vid:'',
		Uid:'',
        moren:'images/moren.png',
		dataList:[],
		dataMess:[],
		dateTimes:[]
    },
    created(){
        this.setCanS()
    },
    methods:{
		 //设置参数
		 setCanS(){
            let Request = new Object()
            Request = GetRequest()
            this.Uid = Request['uid']
			let dateTime=''
            this.getList(dateTime)
        },
        getList(dateTime) {
			this.vid=sessionStorage.getItem('vids')
			const params={
				uid:this.Uid,
				date:dateTime
			}
			getVs()
			axios.get('mobileapi/coach/curr.php?act=tkList',{params:params}).then(data =>{
				console.log(data.data)
				let { msg, code,user} = data.data
					if (code !== 200) {
						window.vant.Toast.fail(msg);
					} else {
						data=data.data
						this.dataList=data.date_list
						this.dataMess=data.data
						for(let i in this.dataMess){
							if(this.dataMess[i].Picurl==""||this.dataMess[i].Picurl==null){
								this.dataMess[i].Picurl='images/moren.png'
							}
						}
						for(let i in this.dataList){
							if(this.dataList[i].check=='1'){
								this.dateTimes=this.dataList[i].time
							}
						}
					}
				}).catch(function (error) {
					// console.log(error); 
					window.vant.Toast.fail("网络错误,请检查网络");

			})
        },
		//选择日期
		selectDate(time){
			this.date=time
			this.getList(time)
		},
		order(date,key,currid,plan_id){
			window.location.href='selectCard.html?uid='+this.Uid+'&date='+date+'&key='+key+'&currid='+currid+'&plan_id='+plan_id+''
		},
		//私教的签到
		pSignIn(id,currid){
				const params={
					id:id,
					currid:currid
				}
				sessionStorage.setItem('logo','0')
				axios.get('/mobileapi/coach/sign.php?act=sign',{params:params}).then(data => {
					console.log(data.data)
					let { msg, code} = data.data
						if (code !== 200) {
							window.vant.Toast.fail(msg)
						} else {
							window.vant.Toast.success("签到成功")
							this.getList(this.dateTimes)
						}
					}).catch(function (error) { 
						console.log(error); 
				})
			},
			//私教的取消预约
			pCancel(id,currid){
				const params={
					id:id,
					currid:currid
				}
				sessionStorage.setItem('logo','0')
				axios.get('/mobileapi/coach/sign.php?act=sign_pass',{params:params}).then(data => {
					console.log(data.data)
					let { msg, code} = data.data
						if (code !== 200) {
							window.vant.Toast.fail(msg)
						} else {
							window.vant.Toast.success("取消成功")
							this.getList(this.dateTimes)
						}
					}).catch(function (error) { 
						console.log(error); 
				})
			},
    }
})

$('#age').mobiscroll().date({
    theme: 'mobiscroll',
    display: 'bottom',
    lang: 'zh',
    defaultValue:new Date(),
    dateFormat: 'yyyy-mm-dd',
    startYear:1940,
    endYear:2025,
    onClose(){
        if($("#age").val()!=""){
            var date=$("#age").val();
            vm.getList(date);
        }
    }
});
</script>
</html>